<template>
	<!--消费需求弹性系数-->
	<div class="consumer-demand">
		<div class="topBox">
			<el-row>
				<el-col span="12">
					<div style="margin:0 .5vw">
						<chart-block chartID="chart1" :title="InfeedBarOptionData.title" :optionData="InfeedBarOptionData" chartType="getInfeedBar" height="48vh" style="padding:0 1vh 2vh 0;margin-top:1vh;" titleType="blueBig"></chart-block>
					</div>
				</el-col>
				<el-col span="12">
					<div style="margin:0 .5vw">
						<chart-block chartID="chart2" :title="BorderPieOptionData.title" :optionData="BorderPieOptionData" chartType="getBorderPie" height="48vh" style="padding:0 1vh 2vh 0;margin-top:1vh;" titleType="blueBig" :dispatchData="dispatchData" @mouseover="Amouseover" @mouseout="Amouseout"></chart-block>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="bottomBox">
			<el-col span="12">
				<div style="margin:0 .5vw">
					<chart-block chartID="chart3" :title="optionData.title" :optionData="optionData" chartType="getStackBar" height="34vh" style="padding:0 1vh 2vh 0" titleType="blueBig"></chart-block>
				</div>
			</el-col>
			<el-col span="12">
				<div style="margin:0 .5vw">
					<chart-block chartID="chart4" :title="singleLineOptionData.title" :optionData="singleLineOptionData" chartType="getSingleLine" height="34vh" style="padding:0 1vh 2vh 0" titleType="blueBig"></chart-block>
				</div>
			</el-col>
		</div>
	</div>
</template>

<script>
import {geteconsumeData,geteconsumeData1,geteconsumeData2,geteconsumeData3} from '@/api/pages.js'
export default {
	name: "consumer-demand",
	components: {
		ChartBlock: () => import('@/components/chart-block')
	},
	props: {},
	data() {
		return {
			InfeedBarOptionData:{
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
			},
			BorderPieOptionData:{
				
			},
			singleLineOptionData:{
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor:[//渐变色
					{ //折线图两侧竖线数据渐变色
						topColor:"rgba(92, 210, 254,1)",
						bottomColor:"rgba(92, 210, 254, 0)"
					},
					{//折线图填充区域渐变色
						topColor:"rgba(105, 209, 239,.2)",
						bottomColor:"rgba(105, 209, 239, 0)"
					},
				],
				LineCircleColor:"#14d0e1",//折线图颜色
				LineCircleBorderColor:"#14d0e1",//折线图描边颜色
			},
			optionData:{
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
			},
			dispatchData:{},
			Maxindex:0
		}
	},
	computed: {},
	created() {

	},
	mounted() {
		this.geteconsumeData('E020')
		this.geteconsumeData1('E022')
		this.geteconsumeData2('E021')
		this.geteconsumeData3('E023')
	},
	methods: {
		// 经济指标挖掘分析-消费需求弹性系数-人均消费支出变化
		geteconsumeData(busiCode){
			geteconsumeData(busiCode).then(res=>{
				if(res.data.code==200){
					this.InfeedBarOptionData = {
						title:res.data.data.title,
						categoryAxis: res.data.data.categoryAxis, //类目轴数据
						seriesData: res.data.data.seriesData[0].data,
						unit:res.data.data.seriesData[0].unit,
						topColor:'#3FEFA0',
						bottomColor:'#3FEFA0'
					}
				}
			}).catch(err=>{
				
			})
		},
		// 经济指标挖掘分析-消费需求弹性系数-2019年消费结构
		geteconsumeData1(busiCode){
			geteconsumeData1(busiCode).then(res=>{
				if(res.data.code==200){
					var MaxArr =[]
					let _this = this
					res.data.data.seriesData[0].data.forEach((item,index,arr)=>{
						MaxArr.push(item.value)
					})
					var MaxData = Math.max(...MaxArr)
					for(let i=0;i<MaxArr.length;i++){
						if(MaxArr[i]==MaxData){
							_this.Maxindex=i
						}
					}
					this.dispatchData={
						type: 'highlight',
						seriesIndex: 0,
						dataIndex: _this.Maxindex
					}
					this.BorderPieOptionData={
						title:res.data.data.title,
                        unit:res.data.data.seriesData[0].unit,
						seriesData:res.data.data.seriesData[0].data,
						color:['#F4A95B', '#6363FF', '#00BEFC','#00D887','#8EC24A','#0073FB'],
						right:'3%',
						pieSelect:true
					}
					
				}
			}).catch(err=>{
				
			})
		},
		// 经济指标挖掘分析-消费需求弹性系数-社会消费品零售总额变化
		geteconsumeData2(busiCode){
			geteconsumeData2(busiCode).then(res=>{
				if(res.data.code==200){
					this.optionData = {
						title:res.data.data.title,
						categoryAxis: res.data.data.categoryAxis, //类目轴数据
						seriesData: res.data.data.seriesData,
						color:["#03cefa","#f1db25","#fd664d"],
					}
				}
			}).catch(err=>{
				
			})
		},
		// 经济指标挖掘分析-消费需求弹性系数-城镇居民人均住房建筑面积变化
		geteconsumeData3(busiCode){
			geteconsumeData3(busiCode).then(res=>{
				if(res.data.code==200){
					let datas = res.data.data.seriesData[0].data
					let lineData =new Array(datas.length)
					for(let i=0;i<lineData.length;i++){
						if(i==0){
							lineData[0]=datas[0]
						}else if(i==lineData.length-1){
							lineData[lineData.length-1]=datas[lineData.length-1]
						}else{
							lineData[i]=0
						}
					}
					this.singleLineOptionData = {
						title:res.data.data.title,
						categoryAxis: res.data.data.categoryAxis, //类目轴数据
						seriesData: [
							{
								data: lineData,//折线图两侧竖线数据
							},
							res.data.data.seriesData[0]
						],
						LinearGradientColor:[//渐变色
							{ //折线图两侧竖线数据渐变色
								topColor:"rgba(92, 210, 254,1)",
								bottomColor:"rgba(92, 210, 254, 0)"
							},
							{//折线图填充区域渐变色
								topColor:"rgba(105, 209, 239,.2)",
								bottomColor:"rgba(105, 209, 239, 0)"
							},
						],
						LineCircleColor:"#14d0e1",//折线图颜色
						LineCircleBorderColor:"#14d0e1",//折线图描边颜色
					}
				}
			}).catch(err=>{
				
			})
		},
		Amouseover(e){
			let _this = this
			if(e.dataIndex!=this.Maxindex)
			this.dispatchData={
				type: 'downplay',
				seriesIndex: 0,
				dataIndex:_this.Maxindex
			}
		},
		Amouseout(e){
			let _this =this
			// this.Maxindex = e.dataIndex;
			this.dispatchData={
				type: 'highlight',
				seriesIndex: 0,
				dataIndex:_this.Maxindex
			}
		}
	},
	updated(){
		let _this = this
		let index = 0
		// this.$chartPieEvent.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 1})
	},
	watch: {}
}
</script>

<style scoped lang="scss">
.consumer-demand {
	width:100%;
	height:100%;
	.topBox{
		width:100%;
		height:58%;
	}
	.bottomBox{
		width:100%;
		height:41%;
		margin-top:1.5vh
	}
}
</style>
